<template>
  <div>
    <a-card title="货品管理">
      <a-form
        ref="formRef"
        :model="materialForm"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 24 }"
        class="border border-gray-200 solid"
      >
        <a-row>
          <a-col :span="12">
            <a-form-item
              label="编码"
              name="code"
              :rules="[
                ruleStore.getRule('code')
                  ? ruleStore.getRule('code')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="materialForm.code"></a-input>
            </a-form-item>

            <a-form-item
              label="名称"
              name="name"
              :rules="[
                ruleStore.getRule('name')
                  ? ruleStore.getRule('name')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="materialForm.name"></a-input>
            </a-form-item>
            <a-form-item
              label="规格"
              name="spec"
              :rules="[
                ruleStore.getRule('spec')
                  ? ruleStore.getRule('spec')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="materialForm.spec"></a-input>
            </a-form-item>
            <a-form-item
              label="保存条件"
              name="store_condi"
              :rules="[
                ruleStore.getRule('store_condi')
                  ? ruleStore.getRule('store_condi')
                  : { required: false },
              ]"
            >
              <a-select v-model:value="materialForm.store_condi">
                <a-select-option value="常温">常温</a-select-option>
                <a-select-option value="冷冻">冷冻</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item
              label="生产日期"
              name="production_date"
              :rules="[
                ruleStore.getRule('production_date')
                  ? ruleStore.getRule('production_date')
                  : { required: false },
              ]"
            >
              <a-date-picker
                placeholder="选择时间"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                v-model:value="materialForm.production_date"
              />
            </a-form-item>

            <a-form-item
              label="保质期"
              name="shelf_life"
              :rules="[
                ruleStore.getRule('shelf_life')
                  ? ruleStore.getRule('shelf_life')
                  : { required: false },
              ]"
            >
              <a-input-number
                :min="1"
                style="width: 100%"
                v-model:value="materialForm.shelf_life"
                suffix="天"
              ></a-input-number>
            </a-form-item>

            <a-form-item
              label="单位"
              name="unit"
              :rules="[
                ruleStore.getRule('unit')
                  ? ruleStore.getRule('unit')
                  : { required: false },
              ]"
            >
              <RemoteUnit v-model="materialForm.unit" />
            </a-form-item>

            <a-form-item
              label="供货价格"
              name="price"
              :rules="[
                ruleStore.getRule('price')
                  ? ruleStore.getRule('price')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="materialForm.price"></a-input>
            </a-form-item>

            <a-form-item
              label="建议售价"
              name="sale_price"
              :rules="[
                ruleStore.getRule('sale_price')
                  ? ruleStore.getRule('sale_price')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="materialForm.sale_price"></a-input>
            </a-form-item>

            <a-form-item
              label="供应商"
              name="supplier_id"
              :rules="[
                ruleStore.getRule('supplier_id')
                  ? ruleStore.getRule('supplier_id')
                  : { required: false },
              ]"
            >
              <a-select v-model:value="materialForm.supplier_id">
                <a-select-option
                  v-for="item in supplierOpts"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
            </a-form-item>

            <a-form-item
              label="初期库存"
              name="stock"
              :rules="[
                ruleStore.getRule('stock')
                  ? ruleStore.getRule('stock')
                  : { required: false },
              ]"
            >
              <a-input v-model:value="materialForm.stock"></a-input>
            </a-form-item>

            <a-form-item
              label="过期时间"
              name="expire_date"
              :rules="[
                ruleStore.getRule('expire_date')
                  ? ruleStore.getRule('expire_date')
                  : { required: false },
              ]"
            >
              <a-date-picker
                placeholder="选择时间"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                v-model:value="materialForm.expire_date"
              />
            </a-form-item>
            <a-form-item
              label="描述"
              name="description"
              :rules="[
                ruleStore.getRule('description')
                  ? ruleStore.getRule('description')
                  : { required: false },
              ]"
            >
              <a-textarea
                v-model:value="materialForm.description"
                placeholder="介绍"
                :rows="4"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="预览图"
              name="preview"
              :rules="[
                ruleStore.getRule('preview')
                  ? ruleStore.getRule('preview')
                  : { required: false },
              ]"
            >
              <Upload v-model="materialForm.preview" />
            </a-form-item>
            <a-form-item label="照片" name="image">
              <Upload v-model="materialForm.image" />
            </a-form-item>
            <a-form-item label="banner图" name="banner">
              <Upload v-model="materialForm.banner" />
            </a-form-item>
            <a-form-item name="album" label="图集">
              <UploadList v-model="materialForm.album" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item :wrapper-col="{ offset: 4, span: 2 }">
          <a-button
            type="primary"
            style="width: 100px"
            v-if="!id"
            @click="onSubmit"
            >提交</a-button
          >
          <a-button type="primary" style="width: 100px" v-else @click="onUpdat"
            >更新</a-button
          >
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import useRuleStore from "@/store/modules/rule";
import Api from "@/api/backend/api";
const ruleStore = useRuleStore();
const router = useRouter();
const route = useRoute();

const openUseSystem = ref(false);
const supplierOpts = ref([]);
onMounted(async () => {
  let data = await Api.supplierController.option({});
  supplierOpts.value = data;
});
const id = ref();
id.value = route.params.id;
if (!id.value) {
  console.error("id空");
}

const formRef = ref(null);
let materialForm = ref({
  id: null,
  album: [],
  supplier_id: null,
  preview: "",
  image: "",
  banner: "",
  name: "",
  code: "",
  unit: "",
  price: "",
  store_condi: "常温",
  spec: "",
  shelf_life: 30.0,
  sale_price: "",
  stock: "",
  description: "",
  production_date: "",
  expire_date: "",
});
if (id.value > 0) {
  let data = await Api.materialController.show({ id: id.value });
  materialForm.value = data;
}

const onUploadSuccess = (result) => {
  console.log(result);
  materialForm.value.album = result;
};

const onSubmit = async () => {
  try {
    //先清空一下验证
    formRef.value.clearValidate();
    await Api.productController.store(materialForm.value);

    setTimeout(() => {
      router.go(-1);
    }, 600);
  } catch (error) {
    console.log(error);
    formRef.value.validate();
  }
};
const onUpdat = async () => {
  try {
    formRef.value.clearValidate();
    await Api.materialController.update({ id: id.value }, materialForm.value);
    setTimeout(() => {
      router.go(-1);
    }, 600);
  } catch (error) {
    formRef.value.validate();
  }
};
</script>

<style scoped>
#container {
  width: 600px;
  height: 400px;
}
</style>
